<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス basebutton</title>
  <othercredit role="translator">
    <firstname>Atuo</firstname>
    <surname>Seki</surname>
        <contrib>2006/04/24　翻訳初版</contrib>
 </othercredit>
</head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Basebutton">
    <lztier>Base Component</lztier>
    <lzcategory>View</lzcategory>
    <lzshortdesc>
        onmouseup,over,downイベントがあるボタンを作成する為の、抽象的なコンポーネント。
    </lzshortdesc>
    <lztag>base/basebutton.xml</lztag>
</lzelement>

<p><classname>basebutton</classname>はボタンの基本的なメカニズム
(<event>onclick</event>,
<event>onmousedown</event>,
<event>onmouseover</event>)をまとめたクラスです。</p>

<p><classname>basebutton</classname>
はフレームリソースが一つも無い状態なので、正しく動かすには
いくつかのフレームリソース<!--link-->が必要です。</p>

<p>以下の例はどのように<classname>basebutton</classname>
を構成するか、そしてどのような動きをするかを示します。</p>

<p>まず最初に、使用するイメージを以下に示します。</p>

<img src="images/basebutton/button-up.png" width="118" height="118" />
<img src="images/basebutton/button-over.png" width="118" height="118" />
<img src="images/basebutton/button-down.png" width="118" height="118" />

<example class="program">
&lt;canvas height="150"&gt;
  &lt;!-- first create the multi-frame resource and give it a name --&gt;
  &lt;resource name="mybutton_rsrc"&gt;
   &lt;!-- first frame MUST be the mouseup state of the button --&gt;  
    &lt;frame src="images/basebutton/button-up.png"/&gt;
    &lt;!-- second frame MUST be the mouseover state of the button --&gt;
    &lt;frame src="images/basebutton/button-over.png"/&gt;
    &lt;!-- third frame MUST be the mousedown state of the button --&gt;
    &lt;frame src="images/basebutton/button-down.png"/&gt;
  &lt;/resource&gt;
  
  &lt;!-- Second, assign the resource to a basebutton tag --&gt;
  &lt;basebutton resource="mybutton_rsrc"/&gt;
&lt;/canvas&gt;
</example>

<p>上の例で、basebuttonは初めに'mouseup'の状態でスクリーンに表示されます、
そしてマウスイベントに応じ関連付けられているイメージを表示します。
ボタンはイメージの表示だけではなく動作させる為に、スクリプトを加える必要があります。
クリックした時にbasebuttonによって実行される基本的な３つのアプローチを以下に示します。</p>


<example class="program" id="basebutton-2">
&lt;canvas&gt;
  &lt;resource name="mybutton_rsrc"&gt;
    &lt;frame src="images/basebutton/button-up.png"/&gt;
    &lt;!-- first frame MUST be the mouseup state of the button --&gt;     
    &lt;frame src="images/basebutton/button-over.png"/&gt;
    &lt;!-- second frame MUST be the mouseover state of the button --&gt;     
    &lt;frame src="images/basebutton/button-down.png"/&gt;
    &lt;!-- third frame MUST be the mousedown state of the button --&gt;     
  &lt;/resource&gt;
  
  &lt;!-- APPROACH 1: include a script in the event attribute, onclick --&gt;
  &lt;basebutton resource="mybutton_rsrc" onclick="this.animate('x', 100, 1000, true)"/&gt;
  
  &lt;!-- APPROACH 2: include a script in the onclick attribute that calls a method --&gt;
  &lt;basebutton resource="mybutton_rsrc" onclick="this.doMyMethod()"&gt;
    &lt;method <em>name</em>="doMyMethod"&gt;
      this.animate('x', 100, 1000, true, {motion: 'easeout'}); 
      this.animate('x', -100, 1000, true, {motion: 'easein'}); 
    &lt;/method&gt;
  &lt;/basebutton&gt;
  
  
  &lt;!-- APPROACH 3: have the method respond to the onclick event directly --&gt;
  &lt;basebutton resource="mybutton_rsrc"&gt;
    &lt;method <em>event</em>="onclick"&gt;
      this.animate('x', 100, 1000, true, {motion: 'easeout'}); 
      this.animate('x', -100, 1000, true, {motion: 'easein'}); 
    &lt;/method&gt;
  &lt;/basebutton&gt;
  
  &lt;simplelayout axis="y" spacing="20"/&gt;
&lt;/canvas&gt;
</example>


<p>また、あなたは他のマウスイベントに対してこれらのアプローチを使用できます、
さらに必要であれば、イメージも切り替えられます。</p>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
